<template>
  <div class="diet-container">
    <div class="header">
      <h3>膳食管理</h3>
    </div>

    <div class="recommendation-card">
      <h4>个性化膳食推荐</h4>
      <p v-if="!dietRecommendation.content">暂无膳食推荐，请完善个人健康档案以便获取定制化建议。</p>
      <div v-else>
        <p>{{ dietRecommendation.content }}</p>
        <p class="tip">建议：{{ dietRecommendation.tip }}</p>
      </div>
      <el-button type="primary" size="small" @click="refreshRecommendation">刷新推荐</el-button>
    </div>

    <div class="feedback-card">
      <h4>记录每日膳食反馈</h4>
      <el-input
        v-model="dailyFeedback"
        :rows="4"
        type="textarea"
        placeholder="今天您吃了什么？感受如何？例如：早餐吃了鸡蛋和全麦面包，感觉精力充沛。"
      />
      <el-button type="primary" :loading="loading" @click="submitFeedback">
        提交反馈
      </el-button>
    </div>

    <div class="history-link">
      <el-button link type="primary" @click="goToHistory">查看历史膳食反馈</el-button>
    </div>

  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
// 假设的API函数，待实际对接后端
import { getDietRecommendationApi, submitDietFeedbackApi } from '../api/diet' 

const router = useRouter()
const dietRecommendation = reactive({
  content: '',
  tip: ''
})
const dailyFeedback = ref('')
const loading = ref(false)

const fetchRecommendation = async () => {
  try {
    const res = await getDietRecommendationApi()
    if (res && res.data) {
      dietRecommendation.content = res.data.content || ''
      dietRecommendation.tip = res.data.tip || ''
    }
  } catch (error) {
    console.error('获取膳食推荐失败:', error)
    ElMessage.error('获取膳食推荐失败')
  }
}

const refreshRecommendation = () => {
  fetchRecommendation()
  ElMessage.success('膳食推荐已刷新')
}

const submitFeedback = async () => {
  if (!dailyFeedback.value.trim()) {
    ElMessage.warning('请输入膳食反馈内容')
    return
  }

  loading.value = true
  try {
    const res = await submitDietFeedbackApi({ feedback: dailyFeedback.value })
    if (res && res.data) {
      ElMessage.success('膳食反馈提交成功')
      dailyFeedback.value = '' // 清空输入框
    } else {
      ElMessage.error(res.message || '膳食反馈提交失败')
    }
  } catch (error) {
    console.error('提交膳食反馈失败:', error)
    ElMessage.error('提交膳食反馈失败，请重试')
  } finally {
    loading.value = false
  }
}

const goToHistory = () => {
  router.push('/diet/history')
}

onMounted(() => {
  fetchRecommendation()
})
</script>

<style scoped>
.diet-container {
  padding: 20px;
  background-color: #f7f8fa;
  min-height: calc(100vh - 50px);
  padding-bottom: 70px;
}

.header {
  text-align: center;
  margin-bottom: 20px;
}

.header h3 {
  font-size: 22px;
  color: #333;
}

.recommendation-card,
.feedback-card {
  background-color: #fff;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
  margin-bottom: 20px;
}

.recommendation-card h4,
.feedback-card h4 {
  margin-top: 0;
  margin-bottom: 15px;
  color: #2e8b57;
  font-size: 18px;
}

.recommendation-card p {
  font-size: 14px;
  line-height: 1.6;
  color: #555;
  margin-bottom: 10px;
}

.recommendation-card .tip {
  color: #ff9800; /* 橙色强调 */
  font-weight: bold;
}

.recommendation-card .el-button {
  background-color: #ff9800; /* 橙色强调 */
  border-color: #ff9800;
  border-radius: 8px;
  margin-top: 10px;
}

.feedback-card .el-textarea {
  margin-bottom: 15px;
}

.feedback-card .el-button {
  width: 100%;
  background-color: #2e8b57; /* 深绿色 */
  border-color: #2e8b57;
  border-radius: 8px;
}

.history-link {
  text-align: center;
  margin-bottom: 20px;
}

/* 调整输入框圆角 */
:deep(.el-textarea__inner) {
  border-radius: 8px;
  box-shadow: 0 0 0 1px #dcdfe6 inset;
}

:deep(.el-textarea__inner:focus) {
  box-shadow: 0 0 0 1px #2e8b57 inset;
}
</style>